<template>
  <arco-table :columns="columns"
           :data="tableData"
           :pagination="false"
           :scrollbar="true"
           :scroll="scroll"
           :rowClass="rowClassName"
           :hoverable="true"
           @row-click="rowClick">
    <template #vcpu_total="{ record }">
      {{ addThousandsSeparator(record.vcpu_total) }}
    </template>
    <template #disk_total="{ record }">
      {{ addThousandsSeparator(record.disk_total) }}
    </template>
    <template #m7_in_bps="{ record }">
      {{ addThousandsSeparator(record.m7_in_bps) }}
    </template>

    <template #m8_out_bps="{ record }">
      {{ addThousandsSeparator(record.m8_out_bps) }}
    </template>
    <template #m22_in_bandwidth="{ record }">
      {{ addThousandsSeparator(record.m22_in_bandwidth) }}
    </template>
    <template #m23_out_bandwidth="{ record }">
      {{ addThousandsSeparator(record.m23_out_bandwidth) }}
    </template>
    <template #capacity="{ record }">
      {{ addThousandsSeparator(record.capacity) }}
    </template>
    <template #max_memory="{ record }">
      {{ addThousandsSeparator(record.max_memory) }}
    </template>
    <template #instantaneous_input_kbps="{ record }">
      {{ addThousandsSeparator(record.instantaneous_input_kbps) }}
    </template>
    <template #instantaneous_output_kbps="{ record }">
      {{ addThousandsSeparator(record.instantaneous_output_kbps) }}
    </template>
    <template #rds003_bytes_in="{ record }">
      {{ addThousandsSeparator(record.rds003_bytes_in) }}
    </template>
    <template #rds004_bytes_out="{ record }">
      {{ addThousandsSeparator(record.rds004_bytes_out) }}
    </template>
    <template #rds014_iops="{ record }">
      {{ addThousandsSeparator(record.rds014_iops) }}
    </template>
    <template #rds016_disk_write_throughput="{ record }">
      {{ addThousandsSeparator(record.rds016_disk_write_throughput) }}
    </template>
    <template #rds017_disk_read_throughput="{ record }">
      {{ addThousandsSeparator(record.rds017_disk_read_throughput) }}
    </template>
  </arco-table>
  <!-- <arco-table :columns="columns"
           :data="tableData"> -->
  <!-- </arco-table> -->

</template>

<script setup>
import { ref, reactive } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptSelectBlock from "@/components/form/vpt-select-block/index.vue";
import vptBaseTable1001 from "@/components/vpt-base-table-1001/index.vue";
import vptPalnTag from "@/components/vpt-base-tag";
import { addThousandsSeparator } from "@/utils/formatter.js";

const props = defineProps({
  height: { type: String, default: "" },
  defaultTabs: { type: String, default: "" },
  chartType: { type: String, default: "init" },
  tableData: { type: Array, default: [] },
  column: {
    type: Array, default: []
  },
});

// const columns = [

// ];
const data = reactive([{
  key: '1',
  name: 'Jane Doe',
  salary: 23000,
  address: '32 Park Road, London',
  email: 'jane.doe@example.com'
}, {
  key: '2',
  name: 'Alisa Ross',
  salary: 25000,
  address: '35 Park Road, London',
  email: 'alisa.ross@example.com'
}, {
  key: '3',
  name: 'Kevin Sandra',
  salary: 22000,
  address: '31 Park Road, London',
  email: 'kevin.sandra@example.com'
}, {
  key: '4',
  name: 'Ed Hellen',
  salary: 17000,
  address: '42 Park Road, London',
  email: 'ed.hellen@example.com'
}, {
  key: '5',
  name: 'William Smith',
  salary: 27000,
  address: '62 Park Road, London',
  email: 'william.smith@example.com'
}]);

const tabOption = [
  { id: "0", name: "全部" },
  { id: "1", name: "告警" },
  { id: "2", name: "提示" },
  { id: "3", name: "正常" },
];

const changeTab = (value) => {
  emit("changeTab", value.id);
};

const scroll = {
  y: "calc(100% - 0.1rem)",
};
let columns = reactive(props.column);

const rowClassName = (record, index) => {
  if (record.process_status == 2) {
    return "row-warn-status";
  } else if (record.process_status == 1) {
    return "row-danger-status";
  }
  return "";
};

const getCellValue = (value) => {
  var parts = value.split("/");
  parts = parts.map(function (item) {
    return addThousandsSeparator(item);
  });
  return parts.join("/");
};

const rowClick = (record, index) => {

  emit("row-click", record);
};
const emit = defineEmits(["changeTab", "row-click"]);
</script>

<style lang="less" scoped>
@import url("../../../../assets/style/table.less");

:deep(.seamless-scroll) {
  flex: 1;
  overflow: hidden;

  .arco-table-container {
    border-top: 1px solid transparent !important;
    // border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
  }
}

.auto-scroll-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .vpt-table-header {
    :deep(.arco-table-tfoot) {
      box-shadow: none;
    }

    :deep(.arco-table-body) {
      display: none;
    }
  }

  .vpt-table-wrapper {
    :deep(.arco-table-header) {
      display: none;
    }
  }
}

.name-text {
  display: block;
  width: 1.4rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmbug .vpt-em-red {
  color: #f53f3f !important;
}

// .yzbug .vpt-em-organge {
//   color: #ff7d00 !important;
// }

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

:deep(.arco-table-tr:hover) {
  background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
  background-size: 100% 98% !important;
}
:deep(.arco-table-td) {
  background: none !important;
}
</style>